/* -------------------------------- 

  #haru-page-des-cards
    
    -------------------------------- */
       #haru-page-des-cards.haru-modern_cards {
            /* background: linear-gradient(135deg, #dbebfd, #a2b0f9);
            padding: 30px; */
            display: grid;
            /* grid-template-rows: 1fr 0.4fr 1fr; */
            grid-template-rows: 130px 0.2fr 0.7fr;
            grid-template-columns: 1fr 0.6fr 1fr 2fr;
            grid-row-gap: 10px;
            grid-column-gap: 10px;
        }
        
        #haru-page-des-cards .haru-modern_card {
            background-color: #fff;
            padding: 40px;
            border-radius: 10px;
            transition: all .3s ease-out;
            text-align: center;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        @media only screen and (max-width: 767px) {
            #haru-page-des-cards.haru-modern_cards {
                display: block;
            }
            .haru-modern_card {
                margin: 20px 0;
            }
        }
        
        .haru-modern_card:hover {
					z-index:9;
            box-shadow: 1px 12px 50px 1px rgb(0 0 0 / 20%);
        }
        
        #haru-page-des-cards.haru-modern_cards>.haru-modern_card:nth-child(1) {
            grid-column-start: 1;
            grid-column-end: 2;
            grid-row-start: 1;
            grid-row-end: 2;
        }
        
        #haru-page-des-cards.haru-modern_cards>.haru-modern_card:nth-child(2) {
            grid-column-start: 2;
            grid-column-end: 4;
            grid-row-start: 1;
            grid-row-end: 2;
        }
        
        #haru-page-des-cards.haru-modern_cards>.haru-modern_card:nth-child(3) {
            grid-column-start: 4;
            grid-column-end: 5;
            grid-row-start: 1;
            grid-row-end: 3;
        }
        
        #haru-page-des-cards.haru-modern_cards>.haru-modern_card:nth-child(4) {
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 2;
            grid-row-end: 4;
        }
        
        #haru-page-des-cards.haru-modern_cards>.haru-modern_card:nth-child(5) {
            grid-column-start: 3;
            grid-column-end: 4;
            grid-row-start: 2;
            grid-row-end: 4;
        }
        
        #haru-page-des-cards.haru-modern_cards>.haru-modern_card:nth-child(6) {
            grid-column-start: 4;
            grid-column-end: 5;
            grid-row-start: 3;
            grid-row-end: 4;
        }
        
        .haru-gradient-text.haru-gradient-blue_to_purple {
            background: linear-gradient(105deg, #64cdf9, #539cf7, #547df7, #5c63f6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .haru-gradient-bg.haru-gradient-blue {
            background: linear-gradient(145deg, #a1aff9, #162e92);
        }
        
        #haru-page-des-cards .haru-modern_card .haru-card-title {
            font-size: 30px;
            font-weight: 600;
            line-height: 1em;
            -webkit-box-reflect: below 0.15em -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1)));
        }
        
        #haru-page-des-cards .haru-modern_card .haru-card-info {
            font-size: 16px;
            color: #210047;
            /* padding-top: 1em; */
        }

/* -------------------------------- 

  #haru-page-permission_management-cards
    
    -------------------------------- */
        #haru-page-permission_management-cards.haru-modern_cards {
            display: grid;
            grid-template-rows: 130px 0.2fr 0.7fr;
            grid-template-columns: 1fr 0.6fr 1fr 2fr;
            grid-row-gap: 10px;
            grid-column-gap: 10px;
        }
        
        #haru-page-permission_management-cards .haru-modern_card {
            /* background: linear-gradient(135deg, #202020, #151515); */
            background: linear-gradient(135deg, #1f1f2d, #141421);
            border-radius: 10px;
            padding: 30px 0;
            transition: all .3s ease-out;
            text-align: center;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        @media only screen and (max-width: 767px) {
            #haru-page-permission_management-cards.haru-modern_cards {
                display: block;
            }
            .haru-modern_card {
                margin: 20px 0;
            }
        }
        
        #haru-page-permission_management-cards .haru-modern_card:hover {
            z-index: 9;
            box-shadow: -1px 1px 50px 1px rgb(0 0 0 / 100%);
        }
        
        #haru-page-permission_management-cards.haru-modern_cards>.haru-modern_card:nth-child(1) {
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 2;
        }
        
        #haru-page-permission_management-cards.haru-modern_cards>.haru-modern_card:nth-child(2) {
            grid-column-start: 3;
            grid-column-end: 4;
            grid-row-start: 1;
            grid-row-end: 2;
        }
        
        #haru-page-permission_management-cards.haru-modern_cards>.haru-modern_card:nth-child(3) {
            grid-column-start: 4;
            grid-column-end: 5;
            grid-row-start: 1;
            grid-row-end: 4;
        }
        
        #haru-page-permission_management-cards.haru-modern_cards>.haru-modern_card:nth-child(4) {
            grid-column-start: 1;
            grid-column-end: 2;
            grid-row-start: 2;
            grid-row-end: 4;
        }
        
        #haru-page-permission_management-cards.haru-modern_cards>.haru-modern_card:nth-child(5) {
            grid-column-start: 2;
            grid-column-end: 4;
            grid-row-start: 2;
            grid-row-end: 4;
        }
        
        .haru-gradient-text.haru-gradient-silk_blue {
            /* background: linear-gradient(90deg, #6bf0a2, #55E4B5, #1DC5E4, #00b5fd); */
            background: linear-gradient(90deg, #a1aff9, #162e92);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            padding-top: 5px;
        }
        
        .haru-modern_card .haru-card-sub_title {
            font-size: 14px;
        }
        
        #haru-page-permission_management-cards .haru-modern_card .haru-card-sub_title {
            color: #fff;
            opacity: .7;
        }
        
        #haru-page-permission_management-cards .haru-modern_card .haru-card-title {
            font-size: 30px;
            font-weight: 600;
            line-height: 1em;
            -webkit-box-reflect: below 0.15em -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1)));
        }
        
        #haru-page-permission_management-cards .haru-modern_card .haru-card-info {
            font-size: 16px;
            color: #fff;
        }